<template>
	<view class="uniGroup">
		<view class="groupItem" @click.stop="operGroup('detail')">
			<view class="bg">
				<view class="cover">
					<image :src="groupItemOne.cover" mode="widthFix"></image>
				</view>
				<view class="bgMain flex alignCenter" v-if="canDelete || canStar || canAdd || canEdit || canActivity || canOffline">
					<view class="flex alignCenter justConEnd smallOper">
						<i class="iconfont icon-lajitong delete" v-if="canDelete" @click.stop="operGroup('del')"></i>
						<!-- <i class="iconfont icon-shoucang5 star" v-if="canStar" @click="operGroup('star')"></i> -->
						<image class="star" :src="groupItemOne.isCollection?'https://image.alhelp.net/uploads/20231104/39ffc5692e205ff0b376a0b9da9ca833.png':'https://image.alhelp.net/uploads/20231104/340eeb08e38fe3fa9f53bae593879eb4.png'" v-if="canStar" mode="widthFix" @click.stop="operGroup('star')"></image>
					</view>
					<view class="oper font12 colorMain">
						<!-- userState 0待审核 1通过 2拒绝 3未加入-->
						<view v-if="canAdd && groupItemOne.loginTeamUserVO.userState>1" @click.stop="operGroup('add')"><text class="focusMargin">+</text>加入</view>
						<view v-if="canEdit" @click.stop="operGroup('edit')"><i class="iconfont icon-bianji"></i>编辑</view>
						<view v-if="(canOffline && userId==groupItemOne.createUserId)" @click.stop="operGroup('offline')">解绑</view>
						<!-- <text v-if="canActivity" @click.stop="operGroup('activity')"><i class="iconfont icon-bianji"></i>活动</text> -->
						<view v-if="canActivity" @click.stop="operGroup('activity')"><text class="focusMargin">+</text>活动</view>
					</view>
				</view>
			</view>
			<view class="con font14">
				<view class="title hiddenOneline">{{groupItemOne.name}}</view>
				<view class="tag colorBlue font12">
					<text v-for="(item,index) in groupItemOne.objectNames" :key="index">{{item}}</text>
					<!-- <view class="" v-if="groupItemOne.objectNames==0">暂无所属圈子</view> -->
				</view>
				<view class="flex alignCenter justConBetween avater color999">
					<view class="flex alignCenter personal">
						<image :src="groupItemOne.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode=""></image>
						<view class="font12 hiddenOneline name">{{groupItemOne.createUserName}}</view>
					</view>
					<view class="font12 totalPerson"><text class="colorMain bold mathMagrin">{{groupItemOne.memberTotal}}</text>人</view>
				</view>
			</view>
			<view class="chooseImg" v-if="groupItemOne.chooseStatus">
				<image src="@/static/image/icons/cr.png" mode="widthFix"></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { operAboutHot } from "@/api/school.js"
	import { joinGroup } from "@/api/send.js"
	export default {
		name:"uni-group",
		props:{
			groupItem:{
				type:Object,
				default(){
					return {}
				}
			},
			// 收藏
			canStar:{
				type:Boolean,
				default:true
			},
			// 删除
			canDelete:{
				type:Boolean,
				default:false
			},
			// 加入
			canAdd:{
				type:Boolean,
				default:true
			},
			// 编辑
			canEdit:{
				type:Boolean,
				default:false
			},
			// 关联活动
			canActivity:{
				type:Boolean,
				default:false
			},
			// 跳转详情
			canDetail:{
				type:Boolean,
				default:true
			},
			// 取消关联
			canOffline:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			groupItem: {
			    handler(newValue, oldValue) {
			        console.log("监听",newValue);
					this.groupItemOne=newValue
			    },
			    deep: true,
			    immediate: true
			}
		},
		data() {
			return {
				userId:'',
				groupItemOne:''
			};
		},
		created() {
			this.userId=uni.getStorageSync('userId')
		},
		methods:{
			operGroup(type){
				if(type=='del'){
					return
				}else if(type=='star'){
					let param={
						isAdd:!this.groupItemOne.isCollection,
						modelId:this.groupItemOne.id,
						modelType:3,//1提问 2回答 -2待回答 3小组
					}
					operAboutHot(param).then((res)=>{
						if(res.code==100000){
							// this.groupItem.isCollection=!this.groupItem.isCollection
							this.groupItemOne.isCollection=!this.groupItemOne.isCollection
						}
					})
					return
				}else if(type=='edit'){
					return
				}else if(type=='offline'){
					uni.showModal({
						title: '提示',
						content: '确定解绑该小组吗？',
						success:(res)=> {
							if (res.confirm) {
								console.log('用户点击确定');
								this.$emit('groupComOper',{type:type,item:this.groupItemOne})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}else if(type=='add'){
					// 需要审核的
					if(this.groupItemOne.charge==1){
						joinGroup({teamId:this.groupItemOne.id}).then((res)=>{
							if(res.code==100000){
								uni.showModal({
									title: '提示',
									content: '您的申请已提交，待组长审核同意后方可进组',
									showCancel:false,
									success: (res)=> {
										if (res.confirm) {
											console.log('用户点击确定');
											this.$emit('groupComOper',{type:type,item:this.groupItemOne})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							}
						}).catch((err)=>{uni.hideLoading()})
					}else if(this.groupItemOne.charge==2){
						uni.showModal({
							title: '提示',
							content: `加入该小组需支付${this.groupItemOne.amount}元，是否确定加入？`,
							success: (res)=> {
								if (res.confirm) {
									console.log('用户点击确定');
									//TO DO
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}else{
						joinGroup({teamId:this.groupItemOne.id}).then((res)=>{
							if(res.code==100000){
								uni.showToast({
									title:'加入成功！',
									icon:'none'
								})
								let emitObj={
									type:type,
									item:this.groupItemOne
								}
								this.$emit('groupComOper',emitObj)
							}
						}).catch((err)=>{uni.hideLoading()})
						return
					}
					return
				}else if(type=='activity'){
					uni.navigateTo({
						url:'/pages/mine/activity/activity?from=group&id='+this.groupItemOne.id
					})
					return
				}else if(type=='detail'){
					if(!this.canDetail){
						if(this.groupItemOne.isRelationTeamActivity)return
						// this.groupItem.chooseStatus=!this.groupItem.chooseStatus
						this.groupItemOne.chooseStatus=!this.groupItemOne.chooseStatus
						this.$emit('groupComOper',{type:this.groupItemOne.chooseStatus?'add':'reduce',item:this.groupItemOne})
					}else{
						uni.navigateTo({
							url:'/pages/send/group/groupDetail/groupDetail?id='+this.groupItemOne.id
						})
					}
					return
				}
			},
			// toHomePage(){
			// 	uni.navigateTo({
			// 		url:'/pages/send/group/groupDetail/groupDetail?id='+this.groupItem.id
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.groupItem{
	background: #fff;
	border-radius: 8rpx;
	position: relative;
	.chooseImg{
		position: absolute;
		right: 0;
		top:0;
		border-radius: 8rpx 8rpx 0 0;
		height:190rpx;
		width: 100%;
		box-sizing: border-box;
		text-align: right;
		background: rgba(0, 0, 0, .3);
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 0 8rpx 0 0;
		}
		
	}
	.bg{
		height:190rpx;
		position: relative;
		border-radius: 8rpx 8rpx 0 0;
		.cover{
			height:190rpx;
			overflow: hidden;
			&>image{
				width:100%;
				height:100%;
				border-radius: 8rpx 8rpx 0 0;
			}
		}
		.bgMain{
			border-radius: 8rpx 8rpx 0 0;
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left:0;
			background: rgba(0, 0, 0, .2);
			.oper{
				width: 100%;
				text-align: center;
				&>view{
					display: inline-block;
					background: rgba(247, 221, 94, 1);
					border-radius: 30rpx;
					padding: 15rpx 20rpx;
					margin: 0 10rpx;
					color: #666666;
				}
			}
		}
		.smallOper{
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			padding: 0 10rpx;
			box-sizing: border-box;
			overflow: hidden;
			// .delete{
			// 	float: left;
			// }
			// .star{
			// 	float: right;
			// }
			.star{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.con{
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 0 0 8rpx 8rpx;
		border:1px solid $bordercolor;
		.tag{
			margin: 10rpx 0;
			&>text{
				display: inline-block;
				margin:0 10rpx 0 0;
			}
		}
		.avater{
			.personal{
				max-width: 80%;
			}
			.name{
				max-width: 200rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 10rpx;
				flex-shrink: 0;
			}
			.totalPerson{
				flex-shrink: 0;
			}
		}
	}
}
</style>